<template>

  <div>
    <a-card :bordered="false">
      <template>
        <div>
          <div class="table-page-search-wrapper">
          </div>

          <div class="table-operator">
            <a-button type="primary" icon="plus" @click="handleAdd()">新建</a-button>
            <a-button type="primary" icon="sync" @click="handleRefresh()">同步</a-button>
          </div>

          <s-table
            ref="table"
            size="default"
            :row-key="record => record.id"
            :columns="columns"
            :data="loadData"
          >
            <span slot="serial" slot-scope="text, record, index">
              {{ index + 1 }}
            </span>
            <span slot="action" slot-scope="text, record">
              <template>
                <a @click="handleEdit(record)">编辑</a>
                <a-divider type="vertical" />
                <template>
                  <a-popconfirm
                    title="确认要删除这条记录吗?"
                    ok-text="确认"
                    cancel-text="取消"
                    @confirm="handleDelete(record)"
                  >
                    <a href="#">删除</a>
                  </a-popconfirm>
                </template>
              </template>
            </span>
          </s-table>
        </div>
      </template>
    </a-card>
    <!-- -->
    <a-modal
      :visible="visible"
      width="1000px"
      title="路由管理"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel">
      <a-form :form="form">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="描述"
          hasFeedback
          help="请填写一段英文描述"
        >
          <a-input style="width: 100%" v-decorator="['desc', {rules: [{ required: true }]}]" />
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="转发路径"
          hasFeedback
        >
          <a-input :min="1" style="width: 100%" v-decorator="['uri', {rules: [{ required: true }]}]" />
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="谓词"
          hasFeedback
        >
          <a-input :min="1" style="width: 100%" v-decorator="['predicates', {rules: [{ required: true }]}]" />
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="规则"
          hasFeedback
        >
          <a-input style="width: 100%" v-decorator="['filters']" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="优先级"
          hasFeedback
        >
          <a-input-number
            :min="1"
            style="width: 100%"
            v-decorator="['order', {
              initialValue: 10,
              rules: [{ required: true }]}]" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
    // import moment from 'moment'
    import pick from 'lodash.pick'
    import { STable } from '@/components'
    import { getServiceList, saveService, updateService, deleteService, refreshService } from '@/api/manage'

    export default {
        name: 'TableList',
        components: {
            STable
        },
        data () {
            return {
                // 查询参数
                queryParam: {},
                // 表头
                columns: [
                    {
                        title: '#',
                        scopedSlots: { customRender: 'serial' }
                    },
                    // {
                    //     title: '编号',
                    //     dataIndex: 'id',
                    //
                    // },
                    {
                        title: '描述',
                        dataIndex: 'desc'
                    },
                    {
                        title: '转发路径',
                        dataIndex: 'uri'
                        // sorter: true,
                        // needTotal: true
                        // customRender: (text) => text + ' 次'
                    },
                    {
                        title: '谓词',
                        dataIndex: 'predicates'
                        // sorter: true
                    },
                    {
                        title: '规则',
                        dataIndex: 'filters',
                        needTotal: true
                        // sorter: true
                    },
                    {
                        title: '优先级',
                        dataIndex: 'order'
                        // needTotal: true
                    },
                    {
                        title: '操作',
                        dataIndex: 'action',
                        width: '150px',
                        scopedSlots: { customRender: 'action' }
                    }
                ],
                // 加载数据方法 必须为 Promise 对象
                loadData: parameter => {
                    console.log('loadData.parameter', parameter)
                    return getServiceList(Object.assign(parameter, this.queryParam))
                        .then(res => {
                            console.log(res)
                            return {
                                'pageSize': 10,
                                'pageNo': 0,
                                'totalPage': 1,
                                'totalCount': res.length,
                                'data': res
                            }
                        })
                },
                visible: false,
                confirmLoading: false,
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 5 }
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 12 }
                },
                form: this.$form.createForm(this),
                // 当前编辑的表单的id
                id: ''
            }
        },
        created () {
        },
        mounted () {
          setTimeout(() => {
            this.form.setFieldsValue({ desc: 'test' })
          }, 3000)
        },
        methods: {
            // 显示模态框
            handleEdit (data) {
                // ajax
                console.log(data)
                this.id = data.id
                const formData = pick(data, ['desc', 'uri', 'filters', 'predicates', 'order'])
                // formData.updatedAt = moment(data.updatedAt)
                console.log('formData', formData)
                Object.assign(this, formData)
                this.form.setFieldsValue(formData)
                this.visible = true
            },
            handleAdd () {
               this.visible = true
            },
            // 点击ok
            handleOk (e) {
                this.ModalText = '正在保存...'
                const { form: { validateFields } } = this
                validateFields((err, values) => {
                    if (!err) {
                        // eslint-disable-next-line no-console
                        console.log('Received values of form: ', values)
                        values.id = this.id
                        // 表单校验成功发送Ajax请求提交
                        this.confirmLoading = true
                        let resp
                        if (values.id == null || values.id === '') {
                            resp = saveService(values)
                        } else {
                            resp = updateService(values.id, values)
                        }
                        resp.then(res => {
                          //
                          // notification.error({
                          //     message: status,
                          //     description: statusText
                          // })
                            // 清空form表单
                            // this.form = {}
                        }).catch(error => {
                            console.log(error)
                            // 业务异常
                            // const {
                            //     response : {status, statusText }
                            // } = error;
                            // notification.error({
                            //       message: status,
                            //       description: statusText
                            //   })
                        }).then(() => {
                            this.visible = false
                            this.confirmLoading = false
                            // 更新表格
                            this.$refs.table.refresh()
                        })
                    }
                })
            },

            // 点击cancel
            handleCancel (e) {
                console.log('Clicked cancel button')
                this.visible = false
                this.confirmLoading = false
            },
            handleDelete (data) {
                console.log('Clicked 删除 button')
                deleteService(data.id)
                  .then(() => this.$refs.table.refresh())
            },
            handleRefresh () {
              refreshService()
                .then(() => this.$refs.table.refresh())
            }
        }
    }
</script>
